<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#boxA, #boxB {
    float:left;padding:10px;margin:10px;-moz-user-select:none;
}
#boxA { background-color: #6633FF; width:75px; height:75px;  }
#boxB { background-color: #FF6699; width:150px; height:150px; }
</style>
<script type="text/javascript">
function dragStart(ev) {
    ev.dataTransfer.effectAllowed='move';
    ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
    ev.dataTransfer.setDragImage(ev.target,0,0);
    return true;
}

function dragEnter(ev) {
    console.log(event ,ev);
    event.preventDefault();
    return true;
}

function dragOver(ev) {
    console.log('over', ev);
    return false;
}

function dragDrop(ev) {
    var src = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(src));
    ev.stopPropagation();
    return false;
}
</script>
</head>
<body>
    <center>
        <h2>Drag and drop HTML5 demo</h2>
        <div>Try to move the purple box into the pink box.</div>
        <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
        </div>
        <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
    </center>
</body>
</html>
